<template>
  <div class="box1">
    <header class="header1">
      <div class="dz">
        <svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31" class="index-okfdP_0">
          <path fill="#FFF" fill-rule="evenodd" d="M22.116 22.601c-2.329 2.804-7.669 7.827-7.669 7.827-.799.762-2.094.763-2.897-.008 0 0-5.26-4.97-7.643-7.796C1.524 19.8 0 16.89 0 13.194 0 5.908 5.82 0 13 0s13 5.907 13 13.195c0 3.682-1.554 6.602-3.884 9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z"></path>
        </svg>
        <span>北京西站</span>
        <svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" class="index-2iXz3_0">
          <path fill="#FFF" fill-rule="evenodd" d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z"></path>
        </svg>
      </div>
      <div class="sousuo">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <path fill-opacity=".38" d="M14.778 13.732a.739.739 0 1 1-1.056 1.036l-2.515-2.565a.864.864 0 0 1-.01-1.206 4.894 4.894 0 0 0 1.357-3.651c-.126-2.492-2.156-4.52-4.648-4.647a4.911 4.911 0 0 0-5.16 5.163c.126 2.475 2.13 4.496 4.605 4.642.451.026.896-.008 1.326-.1a.739.739 0 0 1 .308 1.446c-.56.12-1.137.164-1.72.13-3.227-.19-5.83-2.815-5.995-6.042a6.39 6.39 0 0 1 6.71-6.715c3.25.165 5.884 2.8 6.05 6.048a6.37 6.37 0 0 1-1.374 4.3l2.12 2.161z"></path>
        </svg>
        <span>搜索饿了么商家、商品名称</span>
      </div>
    </header>
    <nav class="tap">
      <swiper :options="swiperOption" ref="mySwiper">

        <swiper-slide>
          <div class="fd_slide fd_slide1">
            <div class="shang">
              <dl>
                <dt>
                  <img src="//fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                </dt>
                <dd>
                  <span>美食</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="//fuss10.elemecdn.com/e/89/185f7259ebda19e16123884a60ef2jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                </dt>
                <dd>
                  <span>晚餐</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="//fuss10.elemecdn.com/c/3c/0184f5b3fa72f295fc01864734218jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                </dt>
                <dd>
                  <span>商超便利</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="//fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                </dt>
                <dd>
                  <span>果蔬生鲜</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="//fuss10.elemecdn.com/7/0a/af108e256ebc9f02db599592ae655jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                </dt>
                <dd>
                  <span>医药健康</span>
                </dd>
              </dl>
            </div>
            <div class="shang">
              <dl>
                <dt>
                  <img src="//fuss10.elemecdn.com/a/7b/b02bd836411c016935d258b300cfejpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                </dt>
                <dd>
                  <span>打牌5折</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="//fuss10.elemecdn.com/3/01/c888acb2c8ba9e0c813f36ec9e90ajpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                </dt>
                <dd>
                  <span>浪漫鲜花</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="//fuss10.elemecdn.com/e/c7/b7ba9547aa700bd20d0420e1794a8jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                </dt>
                <dd>
                  <span>麻辣烫</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="//fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                </dt>
                <dd>
                  <span>地方菜系</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="//fuss10.elemecdn.com/7/b6/235761e50d391445f021922b71789jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                </dt>
                <dd>
                  <span>披萨意面</span>
                </dd>
              </dl>
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </nav>
    <div class="qianggou">
      <div class="qianggou1">
        <h3>品质套餐</h3>
        <h4>搭配齐全吃得好</h4>
        <h5>立即抢购></h5>
        <img src="//fuss10.elemecdn.com/d/d4/16ff085900d62b8d60fa7e9c6b65dpng.png?imageMogr/format/webp/thumbnail/!240x160r/gravity/Center/crop/240x160/">
      </div>
      <div class="qianggou2">
        <h3>限量抢购</h3>
        <h4>超值美味9.9元起</h4>
        <h5>1367人
          <span>正在疯抢></span>></h5>
        <img src="//fuss10.elemecdn.com/b/e1/0fa0ed514c093a7138b0b9a50d61fpng.png?imageMogr/format/webp/thumbnail/!240x160r/gravity/Center/crop/240x160/">
      </div>
    </div>
    <div class="tuijian">
      <h3>—&nbsp;&nbsp;推荐商家&nbsp;&nbsp;—</h3>
      <div class="xuanze">
        <ul>
          <li>
            <p>综合排序

            </p>
          </li>
          <li>
            <p>好评优先</p>
          </li>
          <li>
            <p>距离最近</p>
          </li>
          <li>
            <p>筛选

            </p>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
		components: {
			swiper,
			swiperSlide
		},
		data() {
			return {
				swiperOption: {
				//是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
				notNextTick: true,
		        pagination: '.swiper-pagination',
		        slidesPerView: 'auto',
		        centeredSlides: true,
		        paginationClickable: true,
		        spaceBetween: 30,
		            onSlideChangeEnd: swiper => {
		            	//这个位置放swiper的回调方法
		            	this.page = swiper.realIndex+1;
		            	this.index = swiper.realIndex;
		            }
		        }
			}
		},
		//定义这个sweiper对象
		computed: {
 
		    swiper() {
		      return this.$refs.mySwiper.swiper;
		    }
		},
		mounted () {
			//这边就可以使用swiper这个对象去使用swiper官网中的那些方法
		    this.swiper.slideTo(0, 0, false);
		}
 
	}

</script>

<style scoped src="../css/a1.css"></style>



